<template>
  <v-card class="py-3" flat outlined tile>
    <div class="d-flex justify-space-between align-center caption px-4">
      <span
        class="text--secondary"
        v-text="`订单编号：${order.orderSn}`"
      ></span>
      <span class="red--text" v-text="orderStatus"></span>
    </div>
    <v-divider class="mt-3"></v-divider>
    <ProductList :products="order.orderItems" />
    <v-divider class="mb-3"></v-divider>
    <div class="d-flex justify-space-between align-center caption px-4">
      <span
        class="text--secondary"
        v-text="`应付金额：￥${order.totalAmount.toFixed(2)}`"
      ></span>
      <div v-if="order.status === 0">
        <v-btn
          @click="cancelOrder(order.id)"
          height="25"
          class="mr-2"
          color="#7b7b7b"
          x-small
          outlined
        >
          取消订单
        </v-btn>
        <v-btn
          @click="$router.push(`/payment?id=${order.id}`)"
          height="25"
          color="red"
          x-small
          outlined
        >
          立即付款
        </v-btn>
      </div>
      <div v-else-if="order.status === 1">
        <!-- <v-btn height="25" color="#7b7b7b" x-small outlined>
          查看物流
        </v-btn> -->
        <!-- <v-btn height="25" color="#7b7b7b" x-small outlined>
          确认收货
        </v-btn> -->
      </div>
      <div v-else-if="order.status === 2">
        <!-- <v-btn height="25" class="mr-2" color="#7b7b7b" x-small outlined>
          查看物流
        </v-btn> -->
        <v-btn
          @click="receiveOrder(order.id)"
          height="25"
          color="#7b7b7b"
          x-small
          outlined
        >
          确认收货
        </v-btn>
      </div>
      <div v-else-if="order.status === 5">
        <v-btn
          @click="rePayOrder(order.id)"
          height="25"
          class="mr-2"
          color="#7b7b7b"
          x-small
          outlined
        >
          重新购买
        </v-btn>
        <v-btn
          @click="deleteOrder(order.id)"
          height="25"
          color="#7b7b7b"
          x-small
          outlined
        >
          删除订单
        </v-btn>
      </div>
    </div>
  </v-card>
</template>

<script>
import ProductList from '@/components/ProductList.vue';
import request from '@/request';
export default {
  props: ['order'],
  components: { ProductList },
  data() {
    return {
      orderStatusMap: {
        0: '等待付款',
        1: '等待发货',
        2: '已发货',
        3: '交易完成',
        4: '交易关闭',
        5: '交易取消'
      }
    };
  },
  methods: {
    cancelOrder(id) {
      request
        .put(`/orders/${id}`, {
          status: 5
        })
        .then(() => {
          this.$bus.emit('onOrderStatusChange');
        });
    },
    deleteOrder(id) {
      request.delete(`/orders/${id}`).then(() => {
        this.$bus.emit('onOrderStatusChange');
      });
    },
    rePayOrder(id) {
      request
        .put(`/orders/${id}`, {
          status: 0
        })
        .then(() => {
          this.$router.push(`/payment?id=${id}`);
        });
    },
    receiveOrder(id) {
      request
        .put(`/orders/${id}`, {
          status: 3
        })
        .then(() => {
          this.$bus.emit('onOrderStatusChange');
        });
    }
  },
  computed: {
    orderStatus() {
      return this.orderStatusMap[this.order.status];
    }
  }
};
</script>
